<template>
	<view  class="app_Cont">
		<view class="showCont" v-if="showCont">
			<view class="otherCont">
				<view class="userName">
					<view class="nameText">{{formData.age}}岁 · {{formData.zw}}</view>
					<view class="moneyNum">{{formData.type==1?formData.qwyx+'美元/月':formData.qwyx}}</view>
				</view>
				<view class="bootInfo">
					<view class="iconfont icon-lunchuan"></view>
					<view>{{formData.cblx=='均可'?'船型均可':formData.cblx}} · {{formData.hxyq=='均可'?'航线均可':formData.hxyq}}</view>
				</view>
				<view class="userDes">
					<view class="userDesItem">
						<view class="iconfont icon-zhengshu"></view>
						<view class="userDesText">{{formData.zs}}</view>
					</view>
					<view class="user_dian">·</view>
					<view class="userDesItem">
						<view class="iconfont icon-gangwei"></view>
						<view class="userDesText">{{formData.gzjy}}<text v-if="formData.type==1">年</text></view>
					</view>
					<view class="user_dian">·</view>
					<view class="userDesItem">
						<view class="iconfont icon-fenqixueli"></view>
						<view class="userDesText">{{formData.xl}}</view>
					</view>
				</view>
				<view class="bootInfo">
					<view class="iconfont icon-dizhi"></view>
					<view>{{formData.jg}}</view>
				</view>
			</view>
			<view class="mainCont">
				<view class="stepFrom" v-if="formData.label_data">
					<view class="stepHead">
						<view class="stepHeadName">技能标签</view>
					</view>
					<view class="workTags">
						<view class="tagItem2" :key="index2" :style="'border: 2rpx solid '+getColor(index2)+';color:'+getColor(index2)" v-for="(item2,index2) in formData.label_data.split(',')">#{{item2}}</view>
					</view>
				</view>
				<view class="stepFrom">
					<view class="stepHead">
						<view class="stepHeadName">个人标签</view>
					</view>
					<view class="workTags">
						<view class="tagItem" v-if="formData.height">
							<view class="color1 iconfont icon-shengao"></view>
							<view class="tagItemName">{{formData.height}}cm</view>
						</view>
						<view class="tagItem" v-if="formData.weight">
							<view class="color2 iconfont icon-tizhong-xuanzhong"></view>
							<view class="tagItemName">{{formData.weight}}kg</view>
						</view>
						<view class="tagItem" v-if="formData.gfcc">
							<view class="color3 iconfont icon-dress"></view>
							<view class="tagItemName">{{formData.gfcc}}</view>
						</view>
						<view class="tagItem" v-if="formData.shoe_size">
							<view class="color4 iconfont icon-xiezi"></view>
							<view class="tagItemName">{{formData.shoe_size}}码</view>
						</view>
						<view class="tagItem" v-if="formData.hyzk">
							<view class="color2 iconfont icon-xiangqin"></view>
							<view class="tagItemName">{{formData.hyzk}}</view>
						</view>
						<view class="tagItem" v-if="formData.byyx">
							<view class="color1 iconfont icon-fenqixueli"></view>
							<view class="tagItemName">{{formData.byyx}}</view>
						</view>
						<view class="tagItem" v-if="formData.gj">
							<view class="color4 iconfont icon-guoji"></view>
							<view class="tagItemName">{{formData.gj}}</view>
						</view>
						<view class="tagItem" v-if="formData.blood_type">
							<view class="color3 iconfont icon-xiexing"></view>
							<view class="tagItemName">{{formData.blood_type}}</view>
						</view>
						<view class="tagItem" v-if="formData.csd">
							<view class="color1 iconfont icon-dizhi"></view>
							<view class="tagItemName">{{formData.csd}}</view>
						</view>
						<view class="tagItem" v-if="formData.yysp">
							<view class="color2 iconfont icon-guoneikaoshiyingyu-zikaoyingyu"></view>
							<view class="tagItemName">{{formData.yysp.indexOf('英语')>-1?formData.yysp:'英语'+formData.yysp}}</view>
						</view>
					</view>
				</view>
				<view class="stepFrom" ref="targetElement" v-if="formData.resume_experience">
				  <view class="stepHead" @click="openStep4 = !openStep4">
					<view class="stepHeadName">工作经历</view>
					<view class="closeOpen" >{{openStep4?'收起':'展开'}}</view>
				  </view>
				  <view class="bookItem" v-if="openStep4" :key="index" v-for="(item,index) in formData.resume_experience">
				  	<view class="bookTop">
				  		<view class="name">
				  			<view>{{item.comName}} · {{item.zw}}</view>
				  		</view>
				  	</view>
				  	<view class="epxInfo">{{item.scsj}} 至 {{item.xcsj}}</view>
				  	<view class="expItems">
				  		<view class="expItem">船名：{{item.cm||'- -'}}</view>
				  		<view class="expItem">船型：{{item.cx||'- -'}}</view>
				  		<view class="expItem">航区：{{item.hx||'- -'}}</view>
				  		<view class="expItem">总吨/马力：{{item.zd||'- -'}}/{{item.ml||'- -'}}</view>
				  	</view>
				  </view>
				</view>
				<view class="stepFrom" v-if="zs_json.length>0">
				  <view class="stepHead" @click="openStep3 = !openStep3">
					<view class="stepHeadName">他/她的证书</view>
					<view class="closeOpen" >{{openStep3?'收起':'展开'}}</view>
				  </view>
				  <view class="bookItem" v-if="openStep3" :key="index" v-for="(item,index) in zs_json">
				  	<view class="bookTop">
				  		<view class="name">
				  			<view class="iconfont icon-zhengshu"></view>
				  			<view>{{item.name}}</view>
				  		</view>
						<!-- <view class="tag_succss">正常</view> -->
				  	</view>
				  	<view class="bookInfo" >
				  		<view class="number" v-if="!disNumArr.includes(item.name)">{{[
				          '特殊专业培训证书',
				          '船船保安员证书',
				          '外籍证书',
				        ].includes(item.name)
				          ? '证件种类'
				          : '证件编号'}}：{{mdPhone(item.number)}}</view>
				  		<view class="bookTime">有效期至：{{item.time||'- -'}}</view>
				  	</view>
				  </view>
				</view>
				<view class="stepFrom" v-if="formData.jl_remark">
				  <view class="stepHead">
					<view class="stepHeadName">简历备注</view>
					
				  </view>
				  <view class="remarkCont">{{formData.jl_remark}}</view>
				</view>
			</view>
			<view class="otherCont">
				<view class="otherHead">联系方式</view>
				<view class="talkCont">
				  <view class="talkLeft">
					<view class="talkItem">
					  <view class="iconfont icon-24gl-phoneLoudspeaker"></view>
					  <view class="talkItemVal">{{formData.real_name}} · {{formData.mobile}}</view>
					</view>
					<view class="talkItem" v-if="formData.idcard">
					  <view class="iconfont icon-cardid"></view>
					  <view class="talkItemVal">{{formData.idcard}}</view>
					</view>
				  </view>
				  <view
					class="talkBtn"
					v-if="formData.is_js==0&&!type"
					@click="unlockFn()"
				  >
					<view class="iconfont icon-lock1"></view>
					<view>解锁查看</view>
				  </view>
				</view>
			  </view>
			  <view class="underFlex" v-if="!type">
			  	<view class="ctrlBtn" @click="unlockFn()"  v-if="formData.is_js==0">解锁联系方式</view>
				<view class="ctrlBtn" @click="telFn()"  v-if="formData.is_js==1">联系船员</view>
			  </view>
			  <view class="underFlex" v-if="type">
			  	<view class="ctrlBtn" open-type="share" @click="shareFn()">
					<!-- <text class="iconfont icon-a-1"></text> -->
					<text>分享给他人</text>
					<button open-type="share" @click="shareFn()"></button>
				</view>
			  </view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<load v-if="!showCont"></load>
		<subLoad v-if="showSub"></subLoad>
		<u-modal :show="showModal" :showCancelButton="true" @cancel="showModal = false" title="操作提示" @confirm="modalSure" :content='modalCont'></u-modal>
		<view class="toVipCont" v-show="showVipMask">
			<view class="vipMask">
				<image mode="widthFix" src="/static/img/vip.png"></image>
				<view class="vipMaskName">超级会员</view>
				<view class="qy_des">
					<!-- <view class=" textCenter">超级会员4大权益</view> -->
					<view class="qydes_item flexDes">
						<view class="iconfont icon-jiesuo"></view>
						<view class="qydes_item_text">无限次免费解锁船员</view>
					</view>
					<view class="qydes_item flexDes">
						<view class="iconfont icon-qiyejingzhunhuokexitong"></view>
						<view class="qydes_item_text">快速筛选心仪船员</view>
					</view>
					<view class="qydes_item flexDes">
						<view class="iconfont icon-tuijian-m"></view>
						<view class="qydes_item_text">智能推荐新船员</view>
					</view>
					<view class="qydes_item flexDes">
						<view class="iconfont icon-fabubiaoshu"></view>
						<view class="qydes_item_text">免费发布岗位，快速招人</view>
					</view>
				</view>
				<view class="openBtn" @click="modalPaySure">立即开通</view>
			</view>
			<view class="closeBtn iconfont icon-guanbi-" @click="showVipMask = false"></view>
		</view>
	</view>
</template>

<script>
	import load from '@/components/load.vue'
	import subLoad from '@/components/sub.vue'
	import api from '@/http/api.js'
	export default {
		components:{load,subLoad},
		data() {
			return {
				showSub:false,
				showModal:false,
				showVipMask:false,
				modalCont:'确定要解锁此船员的联系方式？',
				modaPayCont:'免费解锁次数不足，请购买会员查看',
				openStep4:true,
				openStep3:true,
				showCont:false,
				detailId:'',
				type:'',
				formData:{},
				zs_json:[],
				disNumArr:['江证','健康证(海事)','健康证(卫检)','接种证(霍乱)','接种证(黄热)'],
				share:{
				   title: '鲸领航系统分享',
				   imageUrl:'https://whalenav.oss-cn-chengdu.aliyuncs.com/uploads/images/20241211/bde6c10f267dca4630622686023ae395bf821eba.jpg',
				}
			};
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: this.share.title,
				imageUrl: this.share.imageUrl,
			}
		},
		onShareTimeline(res) {//分享到朋友圈
			return {
				title: this.share.title,
				imageUrl: this.share.imageUrl,
			}
		},
		methods:{
			shareFn(){
				wx.showShareMenu({
					withShareTicket:true
				})
			},
			scrollToElement() {	
			  const targetElement = this.$refs.targetElement;
			  if (targetElement) {
				targetElement.scrollIntoView({ behavior: 'smooth' });
			  }
			},
			telFn(){
				uni.makePhoneCall({
					phoneNumber:this.formData.mobile,
				})
			},
			modalPaySure(){
				uni.navigateTo({
					url: '../vip/vip'
				});
			},
			modalSure(){
				let data = {
					biographical_notes_id:this.detailId,
				}
				this.showModal = false
				this.showSub=  true
				api.getRequst(data,'/api/Crew/unlockContact').then((res)=>{
					this.showSub = false
					if(res.code==1){
						uni.showToast({
							title: '解锁成功',
							icon: 'success'
						});
						this.getData()
						
					}else{
						if(res.msg=='免费解锁次数不足，请购买会员查看'){
							this.showVipMask= true
						}else{
							this.$refs.uToast.show({
								message:res.msg,
							})
						}
					}
				})
			},
			unlockFn(){
				this.showModal = true
			},
			getColor(index){
				if(index%5==0){
					return '#f0965b'
				}else if(index%5==1){
					return '#f56cd1'
				}else if(index%5==2){
					return '#85ce61'
				}else if(index%5==3){
					return '#999'
				}else if(index%5==4){
					return '#86a9fb'
				}
			},
			mdPhone(value){
				if(value.length>15){
					return value.replace(
					  /(\d{10})\d{4}(\d{4})/,
					  "$1******$2"
					);
				}else{
					return value.replace(
					  /(\d{1})\d{2}(\d{2})/,
					  "$1***$2"
					);
				}
			},
			getData(){
				let data = {
					biographical_notes_id:this.detailId,
				}
				api.getRequst(data,'/api/Crew/crewDetails').then((res)=>{
					if(res.code==1){
						this.formData = res.data
						if(res.data.zs_json&&res.data.zs_json.length>0){
							this.zs_json = res.data.zs_json.filter((item)=>{
								return item.number|| item.time;
							})
						}
						this.share.title ='职务'+res.data.zw+" | 期望薪资"+res.data.qwyx+' | 证书'+res.data.zs+' ｜ 学历'+res.data.xl
					}
					this.showCont = true
				})
			}
		},
		onLoad(option) {
			console.log(option.type)
			this.type = option.type
			this.detailId = option.id
			this.getData()
		},
	}
</script>

<style lang="less">
.showCont{
	min-height: 100vh;
	background-color: #f6f7f9;
	padding-bottom: 120rpx;
	box-sizing: border-box;
}
.no_bottom{
	padding-bottom: 0rpx;
}
.mainCont {
  width: 92%;
  background-color: #fff;
  border-radius: 30rpx;
  padding: 30rpx 4%;
  margin: 30rpx auto;
  box-sizing: border-box;
  .stepFrom{
	  margin-top: 30rpx;
  }
	.stepHead {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  .stepHeadName {
		font-weight: bold;
		font-size: 30rpx;
	  }
	  
	  .closeOpen{
	  	color: #3f55cc;
	  	font-size: 24rpx;
	  	font-weight: normal;
	  }
	}
	.remarkCont{
	  background-color: #f5f5f5;
	  padding: 30rpx;
	  border-radius: 10rpx;
	  margin-top: 30rpx;
	  box-sizing: border-box;
	}
	.bookItem{
		background-color: #f8f8f8;
		border-radius: 10rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		.bookTop{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.name{
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 26rpx;
				.iconfont{
					margin-right: 15rpx;
				}
			}
			.tag_succss{
				background-color: #85ce61;
				color: #fff;
				padding: 5rpx 20rpx;
				transform: scale(0.8);
				border-radius: 5rpx;
			}
			
			
		}
		.bookInfo{
			color: #666;
			font-size: 24rpx;
			.number{
				margin-top: 15rpx;
			}
			.bookTime{
				color: #666;
				margin-top: 15rpx;
				font-size: 24rpx;
			}
		}
		.epxInfo{
			color: #333;
			font-size: 24rpx;
			margin-top: 10rpx;
		}
		.expItems{
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
			color: #333;
			.expItem{
				width: 49%;
				font-size: 24rpx;
				margin-top: 8rpx;
			}
		}
	}
	.workTags{
		display: flex;
		margin: 10rpx 0;
		flex-wrap: wrap;
		.tagItem,.tagItem2{
			margin-bottom: 15rpx;
			padding: 10rpx 40rpx;
			background-color:#f5f5f5;
			color: #3f55cc;
			font-size: 26rpx;
			border-radius: 70rpx;
			margin-right: 20rpx;
		}
		.tagItem2{
			background-color: #fff;
			border: 2rpx solid #86a9fb;
			border-radius: 0rpx 25rpx 0rpx 0rpx;
		}
		.tagItem{
			padding: 15rpx 20rpx;
			display: flex;
			color: black;
			align-items: center;
			.iconfont{
				color: #fff;
				margin-right: 10rpx;
				border-radius: 50%;
				width: 50rpx;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
			}
		}
		.color1{
			background-color: #5d6fdb;
		}
		.color2{
			background-color: #ec6ab7;
		}
		.color3{
			background-color: #6cb654;
		}
		.color4{
			background-color: #b6a0ee;
		}
	}
}
 .otherCont {
    padding: 30rpx 4% 40rpx;
	width: 92%;
	border-radius: 30rpx;
	margin: 30rpx auto;
	background-color: #fff;
    box-sizing: border-box;
	.userName{
		font-size: 30rpx;
		display: flex;
		align-items: center;
		font-weight: bold;
		justify-content: space-between;
		margin-bottom: 10rpx;
		.nameText{
			margin-right:30rpx;
			width:100rpx;
			flex: 1;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.moneyNum{
			font-size: 28rpx;
			color: #3f55cc;
			font-weight: normal;
		}
	}
	.userDes{
		display: flex;
		align-items: center;
		margin-top: 15rpx;
		.userDesItem{
			display: flex;
			align-items: center;
			
			.iconfont{
				margin-right: 7rpx;
				font-size: 32rpx;
			}
		}
		.user_dian{
			margin: 0 15rpx;
		}
	}
	.bootInfo{
		display: flex;
		align-items: center;
		margin-top: 15rpx;
		.iconfont{
			margin-right: 15rpx;
			font-size: 32rpx;
		}
	}
	.cardMain{
		margin-top: 30rpx;
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		justify-content: space-between;
		.cardMainItem{
			width: 48%;
			margin-bottom: 15rpx;
			font-size: 28rpx;
			color: #000;
			display: flex;
			font-weight: normal;
			.cardMainName{
				color: #666;
				width: 120rpx;
				margin-right: 15rpx;
			}
		}
		.cardMainItem view:last-child{
			width: 100rpx;
			flex: 1;
		}
	}
    .otherHead {
      font-size: 30rpx;
      font-weight: bold;
    }
	.talkCont {
	  padding: 30rpx 0;
	  box-sizing: border-box;
	  display: flex;
	  align-items: center;
	  .talkLeft {
		width: 40rpx;
		flex: 1;
		.talkItem {
		  display: flex;
		  align-items: center;
		  // margin-bottom: 30rpx;
		  padding: 15rpx 0;
		  .iconfont {
			font-size: 40rpx;
			margin-right: 20rpx;
		  }
		}
	  }
	  .talkBtn {
		border-radius: 100rpx;
		border: 2rpx solid #86a9fb;
		color: #86a9fb;
		padding: 20rpx 40rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		.iconfont {
		  margin-right: 10rpx;
		}
	  }
	}
	
}
.underFlex{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		// background-color: #fff;
		padding: 30rpx 4%;
		box-sizing: border-box;
		.ctrlBtn{
			width: 100%;
			text-align: center;
			box-sizing: border-box;
			padding: 24rpx;
			font-size: 26rpx;
			background-color: #91a9f7;
			color: #fff;
			border-radius: 10rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			.iconfont{
				font-size: 40rpx;
				margin-right: 10rpx;
			}
			button{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
			}
		}
	}
	.toVipCont{
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0,0,0.5);
		display: flex;
		align-items: center;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10;
		justify-content: center;
		flex-direction: column;
		.vipMask{
			padding: 30rpx;
			box-sizing: border-box;
			border-radius: 30rpx;
			width: 70%;
			background-image: linear-gradient(to bottom,#f4ece1,#fff);
			text-align: center;
			.vipMaskName{
				font-size: 40rpx;
				margin-top: 20rpx;
			}
			.vipDes{
				color: #333;
				margin-top: 10rpx;
			}
			image{
				width: 60%;
				
			}
			.qy_des{
				box-sizing: border-box;
				margin-top: 20rpx;
				position: relative;
				.textCenter{
					text-align: center;
					color: #333;
				}
				.qydes_item{
					margin-top: 15rpx;
					.qy_top{
						display: flex;
						align-items: center;
						font-size: 30rpx;
						justify-content: center;
						.iconfont{
							width: 40rpx;
							text-align: center;
							margin-right: 20rpx;
							padding: 15rpx 0;
							font-size: 40rpx;
						}
						.icon-tuijian-m{
							font-size: 32rpx;
						}
					}
					.qy_text{
						text-align: center;
						color: #999;
						font-size: 24rpx;
						margin: 20rpx 0 30rpx;
					}
				}
				.flexDes{
					display: flex;
					align-items: center;
					justify-content: center;
					color: #d1a57a;
					.iconfont{
						margin-right: 10rpx;
						font-size: 32rpx;
					}
					.icon-tuijian-m{
						font-size: 28rpx;
					}
				}
			}
			.openBtn{
				padding: 25rpx 0;
				text-align: center;
				border-radius: 50rpx;background-image: linear-gradient(to bottom right,#333,#000);
				color: #fff;
				margin-top: 50rpx;
			}
		}
		.closeBtn{
			width: 50rpx;
			height: 50rpx;
			text-align: center;
			background-color: #999;
			line-height: 50rpx;
			color: #fff;
			border-radius: 50%;
			margin-top: 30rpx;
		}
	}
</style>
